<script setup>
import { onMounted, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { detailsApi } from "@/services/cloudlibrary";

onLoad((e) => {
  id.value = e.id;
  shop_id.value = e.shop_id;
});

// init data loading
const initDataLoading = ref(true);
const id = ref(0);
const shop_id = ref(0);

const showDetail = ref({
  id: 0,
  type_text: "",
  type_class_text: "",
  product_id: "",
  quantity: "",
  order_id: "",
  source: "",
});

//获取数据
const initData = async () => {
  try {
    initDataLoading.value = true;
    let res = await detailsApi({ id: id.value, shop_id: shop_id.value });
    showDetail.value = res.data;
    initDataLoading.value = false;
  } catch (e) {
    initDataLoading.value = false;
    uni.showToast({
      title: e.info,
      icon: "none",
    });
  }
};

onMounted(() => {
  initData();
});
</script>

<template>
  <view class="container">
    <!-- scroll view -->
    <scroll-view class="scroll-view" scrollY>
      <view class="content">
        <view v-if="!initDataLoading">
          <uni-title type="h3" title="库存记录详情"></uni-title>
          <view class="info-warp">
            <view class="info-item">
              <text class="info-label">单据编号</text>
              <up-copy :content="showDetail.id">
                <view class="info-value">
                  <text> {{ showDetail.id || "---" }}</text>
                  <image
                    src="@/static/cloudlibrary/copy-img.png"
                    mode="scaleToFill"
                    v-if="showDetail.id"
                  />
                </view>
              </up-copy>
            </view>
            <view class="info-item">
              <text class="info-label">异动类型</text>
              <text class="info-value">
                {{ showDetail.type_text || "---" }}
              </text>
            </view>
            <!-- <view class="info-item">
              <text class="info-label">子分类</text>
              <text class="info-value">
                {{ showDetail.type_class_text || "---" }}
              </text>
            </view> -->
            <view class="info-item">
              <text class="info-label">商品编号</text>
              <up-copy :content="showDetail.product_id">
                <view class="info-value">
                  <text> {{ showDetail.product_id || "---" }}</text>
                  <image
                    src="@/static/cloudlibrary/copy-img.png"
                    mode="scaleToFill"
                    v-if="showDetail.product_id"
                  />
                </view>
              </up-copy>
            </view>
            <view class="info-item">
              <text class="info-label">商品标题</text>
              <text class="info-value">
                {{ showDetail.product.store_name || "---" }}
              </text>
            </view>
            <view class="info-item">
              <text class="info-label">数量</text>
              <text class="info-value">
                {{ showDetail.value || "---" }}
              </text>
            </view>
            <!-- <view class="info-item">
              <text class="info-label">对象</text>
              <text class="info-value">
                {{ showDetail.source_name || "---" }}
              </text>
            </view> -->
            <view class="info-item" v-if="showDetail.order_id">
              <text class="info-label">订单编号</text>
              <up-copy :content="showDetail.order_id">
                <view class="info-value">
                  <text> {{ showDetail.order_id || "---" }}</text>
                  <image
                    src="@/static/cloudlibrary/copy-img.png"
                    mode="scaleToFill"
                    v-if="showDetail.order_id"
                  />
                </view>
              </up-copy>
            </view>
            <view class="info-item" v-if="showDetail.source">
              <text class="info-label">订单来源</text>
              <text class="info-value">
                {{ showDetail.source || "---" }}
              </text>
            </view>
          </view>
        </view>
        <view v-else>
          <up-skeleton rows="6" loading animate></up-skeleton>
        </view>
      </view>
    </scroll-view>
    <br />
  </view>
</template>

<style lang="scss" scoped>
@import "./details.scss";
</style>
